<template>
    <!-- class="tabbar" -->
    <div>
        <!-- <ul>
            <router-link custom to="/films" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">电影</li>
            </router-link>
            <router-link custom to="/cinemas" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">影院</li>
            </router-link>
            <router-link custom to="/centers" v-slot="{ isActive, navigate }">
                <li :class="isActive ? 'aaa' : ''" @click="navigate">我的</li>
            </router-link>
        </ul> -->
        <footer>
            <van-tabbar v-model="active">
                <van-tabbar-item :name="0" to="/films">
                    <span>电影</span>
                    <template #icon="props">
                        <img :src="props.active ? icon.active : icon.inactive" />
                    </template>
                </van-tabbar-item>

                <van-tabbar-item :name="1" icon="search" to="/cinemas">影院</van-tabbar-item>
                <van-tabbar-item :name="2" icon="friends-o" to="/centers">我的</van-tabbar-item>

            </van-tabbar>
            <!-- <van-tabbar v-model="active">
                <van-tabbar-item>
                    <span>自定义</span>
                    <template #icon="props">
                        <img :src="props.active ? icon.active : icon.inactive" />
                    </template>
                </van-tabbar-item>
                <van-tabbar-item icon="search">标签</van-tabbar-item>
                <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
            </van-tabbar> -->
        </footer>
    </div>
</template>

<script setup>
import { Tabbar as vanTabbar, TabbarItem as vanTabbarItem } from 'vant';
import { onMounted, ref } from 'vue';
// const active = ref(0);
// onMounted(() => {
//     const navBarActive = ref(window.location.href)
//     if (navBarActive.value.includes('/films')) {
//         active.value = 0
//     } else if (navBarActive.value.includes('/cinemas')) {
//         active.value = 1
//     } else if (navBarActive.value.includes('/centers')) {
//         active.value = 2
//     }
// })

const active = ref(0);
const icon = {
    active: '@/icon/dianyingpiaoiocn.png',
    inactive:
        '@/icon/dianyingpiaoiocn-copy.png',

    active1: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
    inactive1:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',

    active2: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
    inactive2:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
}
</script>

<style scoped lang="scss">
.aaa {
    color: red;
}

.tabbar {
    // overflow: hidden;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    font-size: 3vw;
    color: #fff;

    background-color: #000;

    & ul {
        display: flex;
        list-style: none;

        & li {
            flex: 1;
        }
    }

}
</style>